<template>
  <div class="dialog-wrap">
    <el-dialog :visible.sync="dialogVisible_status.show" center>
      <div class="show-title">标识ID：{{ sn_seled }}</div>
      <div class="show-title">
        状态：{{ status_seled == -1 ? "已冻结" : status_seled == 0 ? "已关闭" : "已激活" }}
      </div>
      <!-- 2 -->
      <el-form
        :inline="true"
        :model="form2ruleform"
        ref="form2"
        :rules="form2rules"
        class="demo-form-inline form2"
      >
        <el-form-item label="状态" prop="status">
          <el-select v-model="form2ruleform.status" placeholder="请选择">
            <el-option label="冻结" :value="-1"></el-option>
            <el-option label="关闭" :value="0"></el-option>
            <el-option label="激活" :value="1"></el-option>
          </el-select>
           <el-button type="primary" size="small" @click="fnSubmit('form2')"
            >修改</el-button
          >
        </el-form-item>
       
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "audit",
  props: {
    dialogVisible_status: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
    sn: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      sn_seled: "",
      status_seled:0,
      form2ruleform: {
        status: "",
      },
      form2rules: {
        status: [{ required: false, message: "", trigger: "blur" }],
      },

    };
  },
  mounted() {
    this.status_seled = this.status
  },
  watch: {
    sn: {
      handler(newVal) {
        this.sn_seled = newVal;
      },
      immediate: true,
    },
    status: {
      handler(newVal) {
        this.status_seled = newVal;
      },
      deep:true,
      immediate: true,
    },
  },
  methods: {
    //修改状态
    fnSubmit(formName) {
      var that = this;
      let _status = this.form2ruleform.status;
      if (_status == -1) {
        this.frozenFn();
      } else if (_status == 0) {
        this.closeFn();
      } else if (_status == 1) {
        this.enableFn();
      }
    },
    //冻结按钮
    frozenFn() {
      postData("/adminweb/host/update/status", {
        sn: this.sn_seled,
        status: -1,
      })
        .then((res) => {
          if (res.code == 0) {
            this.status_seled = -1;
            //console.log(this.status);
            this.$message.success("已冻结");
            this.$emit("refreshList");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //关闭按钮
    closeFn() {
      postData("/adminweb/host/update/status", {
        sn: this.sn_seled,
        status: 0,
      })
        .then((res) => {
          if (res.code == 0) {
            this.status_seled = 0;
            this.$message.success("已关闭");
            this.$emit("refreshList");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //激活按钮
    enableFn() {
      postData("/adminweb/host/update/status", {
        sn: this.sn_seled,
        status: 1,
      })
        .then((res) => {
          if (res.code == 0) {
            this.status_seled = 1;
            this.$message.success("已激活");
            this.$emit("refreshList");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
  },
};
</script>

<style scoped>
.dialog-wrap >>> .el-dialog {
  height: 600px;
  overflow-y: scroll;
}
.btn-group {
  margin: 10px 0;
}
.show-title {
  margin-bottom: 10px;
  font-weight: 600;
}
.dialog-wrap >>> .el-form--inline .el-form-item__label {
  display: block;
}
.dialog-wrap >>> .el-form-item {
  width: 100% !important;
  display: flex;
}

.dialog-wrap >>> .el-button {
  margin-left: 30px;
}
</style>
